<template>
	<view>
		<my-header>
			<view class="header-box">
				<view @click="toBack">
					<uni-icons type="arrowleft" size="24"></uni-icons>
				</view>
				<view>
					<uni-icons type="more-filled" size="24"></uni-icons>
				</view>
			</view>
		</my-header>
		
		<view class="my-container">
			<!-- 书籍详情 -->
			<view class="novel-box">
				<view class="novel-box-top">
					<img :src="novel.img" alt="" class="novel-img">
					<view>
						<view class="novel-name">{{novel.name}}</view>
						<view class="novel-author">{{novel.author}}</view>
					</view>
				</view>
				<view :class="!isWholeShow ? 'whole-show' : ''" class="introduction" @click="showMore">
					{{novel.introduction}}
				</view>
				<view class="more" v-show="!isWholeShow" @click="showMore">更多</view>
				
				<view class="chapter-list" @click="toChapter">
					<view class="chapter-title">目录</view>
					<view>连载至	{{novel.lastchapter}} ></view>
				</view>
			</view>
			
			<view class="ctrl-btns">
				<view class="ctrl-btn" v-show="isAdd" @click="addShelf">加入书架</view>
				<view class="ctrl-btn" v-show="!isAdd" @click="removeShelf">移出书架</view>
				<view class="ctrl-btn to-read" @click="toRead">立即阅读</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				novel: '',
				nid: 30,
				isWholeShow: false,
				iswhole: 0,
				isAdd: true,
				deviceId: 0
			}
		},
		
		methods: {
			toBack() {
				uni.navigateBack({
					
				})
			},
			
			toChapter() {
				uni.navigateTo({
					url: '../novel-detail/chapter?nid=' + this.nid + '&currentChapter=1'
				})
			},
			
			removeShelf() {
				this.myApi({
					url: '/api/removeshelf',
					domain: true,
					data: {id: this.nid, deviceId: this.deviceId},
					method: 'POST'
				}).then((res)=>{
					if (res.status == 10001) {
						this.isAdd = false
						uni.showToast({
							title: '移出成功'
						})
					}
				})
			},
			
			addShelf() {
				this.myApi({
					url: '/api/addshelf',
					domain: true,
					data: {id: this.nid, deviceId: this.deviceId},
					method: 'POST'
				}).then((res)=>{
					if (res.status == 10001) {
						this.isAdd = false
						uni.showToast({
							title: '加入成功'
						})
					}
				})
			},
			
			toRead() {
				uni.navigateTo({
					url: '../novel-detail/novel-detail?nid=' + this.nid + '&source=0'
				})
			},
			
			// 
			showMore() {
				this.isWholeShow = true
			},
		},
		
		async onLoad(options) {
			uni.showLoading({
				title: '...'
			})
			this.nid = options.id
			// 获取小说详情
			const novelMsg = await this.myApi({
				url: '/api/novel',
				domain: true,
				data: {id: this.nid}
			})
			
			/*
				拿到的信息有两种情况
				1.完整，iswhole==1  => 需要更新目录？可以直接赋值，最后改变最新章节即可
				2.不完整，iswhole==0  => 需要更新详情和目录！不用赋值，更新返回后再赋值
			*/
			
			
			// 抓取小说页面
			const novelContent = await this.myApi({
				url: novelMsg.data.url
			})
			
			// 按需要更新小说详情和最新章节，返回详情和最新章节
			const updateNovel = await this.myApi({
				url: '/api/modifynovel',
				domain: true,
				data: {msg: novelContent, id: this.nid, iswhole: novelMsg.data.iswhole},
				method: 'POST'
			})
			// 
			
			
			const info = uni.getSystemInfoSync()
			this.deviceId = info.deviceId
			
			const shelfMsg = await this.myApi({
				url: '/api/isinshelf',
				domain: true,
				data: {nid: this.nid, deviceId: this.deviceId},
				method: 'POST'
			})
			
			// this.iswhole = novelMsg.data.iswhole
			if (novelMsg.data.iswhole == 1){
				this.novel = novelMsg.data
				this.novel.lastchapter = updateNovel.data.lastchapter
			} else {
				this.novel = updateNovel.data
				this.novel.name = novelMsg.data.name
			}
			
			
			if(shelfMsg.status == 10001) {
				this.isAdd = false
			} else {
				this.isAdd = true
			}
			uni.hideLoading()
		}
	}
</script>

<style>
	.header-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		padding: 0 30rpx;
	}
	/* .novel-box{
		padding: 0 30rpx;
	} */
	
	.novel-box-top {
		display: flex;
		align-items: center;
	}
	
	.novel-img {
		width: 200rpx;
		height: 280rpx;
		margin-right: 40rpx;
	}
	
	.novel-name {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.novel-author {
		font-size: 32rpx;
	}
	
	.whole-show {
		-webkit-line-clamp: 3;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		display: -webkit-box;
	}
	
	.more {
		color: #007AFF;
	}
	
	.introduction {
		padding-top: 30rpx;
	}
	
	.chapter-list {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		align-items: center;
		text-align: center;
	}
	
	.chapter-title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.ctrl-btns {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100rpx;
		/* border-top: 1rpx solid #CCCCCC; */
		display: flex;
		justify-content: space-around;
		width: 100%;
		align-items: center;
		text-align: center;
	}
	
	.ctrl-btn {
		padding: 10rpx 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 40rpx;
	}
	
	.to-read {
		background-color: red;
		color: #fff;
		border-color: red;
	}
</style>
